import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import LanguageSelector from './LanguageSelector';

const ButtonContrastTest = () => {
  const { t } = useTranslation();
  const [countdown, setCountdown] = useState(0);
  const [isCountingDown, setIsCountingDown] = useState(false);

  const startCountdown = () => {
    setCountdown(60);
    setIsCountingDown(true);
  };

  useEffect(() => {
    let timer;
    if (countdown > 0) {
      timer = setTimeout(() => {
        setCountdown(countdown - 1);
      }, 1000);
    } else if (countdown === 0 && isCountingDown) {
      setIsCountingDown(false);
    }
    return () => clearTimeout(timer);
  }, [countdown, isCountingDown]);

  return (
    <div style={{
      padding: '40px',
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: '30px'
    }}>
      {/* 页面标题 */}
      <div style={{ position: 'relative', width: '100%', maxWidth: '800px' }}>
        <h1 style={{ 
          color: 'white', 
          textAlign: 'center',
          marginBottom: '10px',
          fontSize: '28px',
          fontWeight: '600'
        }}>
          🎨 按钮对比度优化测试
        </h1>
        
        {/* 语言选择器 */}
        <div style={{ position: 'absolute', top: '0', right: '0' }}>
          <LanguageSelector />
        </div>
      </div>

      {/* 测试卡片 */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: '30px',
        width: '100%',
        maxWidth: '800px'
      }}>
        
        {/* 验证码按钮测试 */}
        <div style={{
          background: 'rgba(255, 255, 255, 0.95)',
          padding: '30px',
          borderRadius: '12px',
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
          backdropFilter: 'blur(10px)'
        }}>
          <h3 style={{ 
            marginBottom: '20px', 
            color: '#333',
            fontSize: '18px',
            fontWeight: '600'
          }}>
            📱 验证码按钮对比度测试
          </h3>
          
          <div style={{ marginBottom: '20px' }}>
            <label style={{ 
              display: 'block', 
              marginBottom: '8px', 
              color: '#666',
              fontSize: '14px'
            }}>
              手机号码
            </label>
            <input 
              type="tel" 
              placeholder="请输入手机号码"
              style={{
                width: '100%',
                padding: '12px 16px',
                border: '2px solid #d9d9d9',
                borderRadius: '6px',
                fontSize: '14px',
                boxSizing: 'border-box'
              }}
            />
          </div>

          <div style={{ 
            display: 'flex', 
            gap: '8px', 
            alignItems: 'center',
            marginBottom: '20px'
          }}>
            <input 
              type="text" 
              placeholder="请输入验证码"
              style={{
                flex: 1,
                padding: '12px 16px',
                border: '2px solid #d9d9d9',
                borderRadius: '6px',
                fontSize: '14px',
                height: '44px',
                boxSizing: 'border-box'
              }}
            />
            
            {/* 使用优化后的验证码按钮样式 */}
            <button 
              onClick={startCountdown}
              disabled={isCountingDown}
              className="verification-code-btn"
              style={{
                padding: '12px 16px',
                backgroundColor: isCountingDown ? '#ff7875' : '#1890ff',
                color: 'white',
                border: isCountingDown ? '2px solid #ff4d4f' : '2px solid #1890ff',
                borderRadius: '6px',
                cursor: isCountingDown ? 'not-allowed' : 'pointer',
                fontSize: '14px',
                fontWeight: '600',
                whiteSpace: 'nowrap',
                transition: 'all 0.3s ease',
                minWidth: '100px',
                height: '44px',
                boxShadow: isCountingDown 
                  ? '0 2px 8px rgba(255, 77, 79, 0.3)'
                  : '0 2px 8px rgba(24, 144, 255, 0.3)'
              }}
            >
              {isCountingDown ? `${countdown}s` : '获取验证码'}
            </button>
          </div>

          <div style={{ 
            fontSize: '12px', 
            color: '#666',
            padding: '10px',
            backgroundColor: '#f6f6f6',
            borderRadius: '6px'
          }}>
            <strong>✨ 优化效果：</strong><br/>
            • 正常状态：蓝色边框 + 阴影效果<br/>
            • 倒计时状态：红色背景 + 醒目边框<br/>
            • 字体加粗：更清晰的数字显示
          </div>
        </div>

        {/* 语言选择器测试 */}
        <div style={{
          background: 'rgba(255, 255, 255, 0.95)',
          padding: '30px',
          borderRadius: '12px',
          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
          backdropFilter: 'blur(10px)'
        }}>
          <h3 style={{ 
            marginBottom: '20px', 
            color: '#333',
            fontSize: '18px',
            fontWeight: '600'
          }}>
            🌍 语言选择器对比度测试
          </h3>
          
          <div style={{ marginBottom: '20px' }}>
            <p style={{ 
              marginBottom: '15px', 
              color: '#666',
              fontSize: '14px',
              lineHeight: '1.6'
            }}>
              语言选择器现在拥有更强的视觉对比度：
            </p>
            
            <div style={{ 
              display: 'flex', 
              justifyContent: 'center',
              marginBottom: '20px'
            }}>
              <LanguageSelector />
            </div>
          </div>

          <div style={{ 
            fontSize: '12px', 
            color: '#666',
            padding: '10px',
            backgroundColor: '#f6f6f6',
            borderRadius: '6px'
          }}>
            <strong>✨ 优化效果：</strong><br/>
            • 蓝色边框：增强视觉识别度<br/>
            • 彩色阴影：营造悬浮效果<br/>
            • 悬停动画：提升交互反馈<br/>
            • 背景透明度：保持清晰可见
          </div>
        </div>
      </div>

      {/* 实时翻译演示 */}
      <div style={{
        background: 'rgba(255, 255, 255, 0.95)',
        padding: '30px',
        borderRadius: '12px',
        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.1)',
        backdropFilter: 'blur(10px)',
        width: '100%',
        maxWidth: '800px'
      }}>
        <h3 style={{ 
          marginBottom: '20px', 
          color: '#333',
          fontSize: '18px',
          fontWeight: '600',
          textAlign: 'center'
        }}>
          🔄 实时翻译测试
        </h3>
        
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: '20px'
        }}>
          <div>
            <h4 style={{ color: '#1890ff', marginBottom: '10px' }}>登录相关</h4>
            <ul style={{ listStyle: 'none', padding: 0, fontSize: '14px', lineHeight: '1.8' }}>
              <li>• {t('login.title')}</li>
              <li>• {t('login.getVerificationCode')}</li>
              <li>• {t('login.loginButton')}</li>
              <li>• {t('login.register')}</li>
            </ul>
          </div>
          
          <div>
            <h4 style={{ color: '#52c41a', marginBottom: '10px' }}>通用按钮</h4>
            <ul style={{ listStyle: 'none', padding: 0, fontSize: '14px', lineHeight: '1.8' }}>
              <li>• {t('common.confirm')}</li>
              <li>• {t('common.cancel')}</li>
              <li>• {t('common.save')}</li>
              <li>• {t('common.loading')}</li>
            </ul>
          </div>
        </div>

        <div style={{
          textAlign: 'center',
          marginTop: '20px',
          padding: '15px',
          backgroundColor: '#e6f7ff',
          borderRadius: '8px',
          border: '1px solid #91d5ff'
        }}>
          <span style={{ color: '#1890ff', fontWeight: '600' }}>
            💡 切换上方语言选择器，观察文本实时翻译效果
          </span>
        </div>
      </div>
    </div>
  );
};

export default ButtonContrastTest; 